<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="../js/index.css">
    <script src="../js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="../js/index.js"></script>
</head>
<body>
    <div id="app">
        <el-table :data="tableData" stripe>
            <!--
        prop: 从数据对象中获取哪个属性的值
        label：列头的展示内容
        [
                    {date:'2019.10.10',name:'小明',address:'北京',id:1},//每个json对象对应表格中一条数据
                    {date:'2019.10.10',name:'小李',address:'南京',id:2}
                ]
-->
            <el-table-column prop="id" label="id"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" align="center">
                <!--
                    slot-scope：作用域插槽，可以获取表格数据
                    scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
                -->
				
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini"  @click="handleDelete(scope.row)">删除</el-button>
                    <el-button type="primary" size="mini"  @click="showData(scope)">展示</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <script>
                new Vue({
                    el:'#app',
                    data:{
                        tableData:[
                    {date:'2019.10.10',name:'小明',address:'北京',id:1},//每个json对象对应表格中一条数据
                    {date:'2019.10.10',name:'小李',address:'南京',id:2}
                ]
            },
            methods:{
                //定义VUE对象的方法
                handleUpdate(xxx){
                    console.log(xxx)
                },
                handleDelete(yyy){
					//axios.get("http://localhost:8080/user/delete?id=" + yyy.id).then(..)
                    //console.log(yyy);
                    console.log(yyy.id)

                },
                showData(data){
                    console.log(data)
                }

            }
        });
    </script>
</body>
</html>